<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>维修工单</title>
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
		<style>
			a {
				text-decoration: none;
				/* 取消下划线 */
				color: inherit;
				/* 继承父元素颜色 */
				outline: none;
				/* 取消焦点样式 */
			}

			.status-bar {
				height: 44px;
				background-color: #000;
				color: white;
				display: flex;
				align-items: center;
				padding: 0 15px;
			}

			.header-section {
				padding: 15px;
				background: #fff;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			}

			.search-bar {
				margin-bottom: 15px;
			}

			.tab-nav {
				display: flex;
				overflow-x: auto;
				padding: 0 15px 10px;
			}

			.tab-item {
				margin-right: 15px;
				white-space: nowrap;
				position: relative;
			}

			.red-dot {
				position: absolute;
				top: -2px;
				right: -2px;
				width: 8px;
				height: 8px;
				background: #ff4444;
				border-radius: 50%;
			}

			.active-tab {
				color: #4a90e2;
				border-bottom: 2px solid #4a90e2;
			}

			.workorder-card {
				margin: 15px;
				padding: 15px;
				border: 1px solid #e9ecef;
				border-radius: 8px;
				position: relative;
			}

			.workorder-status {
				position: absolute;
				right: 15px;
				top: 15px;
				padding: 3px 8px;
				border-radius: 4px;
				background: #9c27b0;
				color: white;
			}

			.bottom-nav {
				position: fixed;
				bottom: 0;
				width: 100%;
				background: #fff;
				border-top: 1px solid #e9ecef;
				padding: 10px 0;
			}

			.nav-item {
				flex: 1;
				text-align: center;
				text-decoration: none;
				color: #6c757d;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 5px 0;
			}

			.nav-item.active {
				color: #007bff;
			}

			.nav-item i {
				font-size: 1.2rem;
			}

			.bottom-nav {
				position: fixed;
				bottom: 0;
				width: 100%;
				background: #fff;
				border-top: 1px solid #e9ecef;
				padding: 10px 0;
			}
		</style>
	</head>
	<body>
		<!-- 状态栏模拟 -->


		<div class="container-fluid p-0">
			<!-- 标题栏 -->
			<div class="header-section d-flex justify-content-between align-items-center">
				<a href="../ShouYe.html" class="text-decoration-none text-dark">
					<i class="bi bi-arrow-left"></i>
				</a>
				<h5 class="mb-0">维修工单</h5>
				<div class="d-flex align-items-center">
					<a href="#" class="text-decoration-none text-dark me-3">
						<i class="bi bi-three-dots-vertical"></i>
					</a>
					<a href="#" class="text-decoration-none text-dark">
						<i class="bi bi-qr-code"></i>
					</a>
				</div>
			</div>

			<!-- 搜索栏 -->
			<div class="search-bar">
				<div class="input-group">
					<input type="text" class="form-control" placeholder="输入手机号/故障位置查询">
					<button class="btn btn-light" type="button">搜索</button>
				</div>
			</div>

			<!-- 标签导航 -->
			<div class="tab-nav">
				<div class="tab-item">
					<span><a href="DaiPaiDan.html">待派单</a></span>

				</div>
				<div class="tab-item active-tab position-relative">
					<span><a href="#">处理中</a></span>

				</div>
				<div class="tab-item position-relative">
					<span><a href="DaiShenHe.html">待审核</a></span>

				</div>
				<div class="tab-item position-relative">
					<span><a href="ShenheNo.html">审核不通过</a></span>

				</div>
				<div class="tab-item"><a href="DaiZhiFu.html">待支付</a></div>
				<div class="tab-item"><a href="ShiGongZhong.html">施工中</a></div>
				<div class="tab-item"><a href="YiWanCheng.html">已完成</a></div>
				<div class="tab-item"><a href="YiQuXiao.html">已取消</a></div>
			</div>

			<!-- 工单列表 -->
			<div class="list-group" id="_tbody">



			</div>

			<!-- 底部导航 -->
			<div class="bottom-nav">
				<div class="container-fluid">
					<div class="d-flex justify-content-around">
						<a href="GuanLiDuan.html" class="nav-item">
							<i class="bi bi-house"></i>
							<span class="fs-7 mt-1">首页</span>
						</a>
						<a href="DaiPaiDan.html" class="nav-item active">
							<i class="bi bi-bug"></i>
							<span class="fs-7 mt-1">报障维修</span>
						</a>
						<a href="" class="nav-item">
							<i class="bi bi-person"></i>
							<span class="fs-7 mt-1">我的</span>
						</a>
					</div>
				</div>
			</div>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
		<script src="js/jquery.js"></script>
		<script src="../js/request/base.js"></script>
		<script src="js/script/ChuLiZhong.js"></script>
	</body>
</html>